<template>
<div>
	<header class="header">
		<figure>
			<div  class="public">
        <div>
          <img src="http://img2.imgtn.bdimg.com/it/u=2159481810,3897864870&fm=27&gp=0.jpg" alt="">
        </div>
      </div>
		</figure>
		<div>电竞</div>
		<figure>
		</figure>
	</header>
	<div class="play">
		<div>
			<p>正在回放</p>
			<p><img src="../assets/images/page3_2.png" alt="">回放单</p>
		</div>
		<div>
			<img src="../assets/images/page3_1.png" alt="">
		</div>
		</div>
		<div class="play_bottom">
		<div>
			<p>今日赛事</p>
			<p>2场 ></p>
		</div>
		<div>
			<img src="../assets/images/page3_3.png" alt="">
			<img src="../assets/images/page3_4.png" alt="">
		</div>
	</div>
	<div class="wrap">
		<dl v-for="(v,i) in wrap" :key="i">
			<dt><img :src="v.imgUrl" alt=""></dt>
			<dd>{{v.dd}}</dd>
		</dl>
	</div>
	<div class="message">
      <dl v-for = "(v,i) in message" :key="i">
        <dd>
          <h6>{{v.h6}}</h6>
          <p>{{v.p}}</p>
        </dd>
        <dt><img v-bind:src="v.imgUrl" alt=""></dt>
      </dl>
    </div> 
</div>
</template>
<script>
export default {
  data () {
    return{
    	wrap:[
        {imgUrl:"../../static/images/wrap1.png",dd:"赛程订阅"},
        {imgUrl:"../../static/images/wrap2.png",dd:"赛事视频"},
        {imgUrl:"../../static/images/wrap3.png",dd:"俱乐部"},
        {imgUrl:"../../static/images/wrap4.png",dd:"赛况数据"},
        {imgUrl:"../../static/images/wrap5.png",dd:"竞猜"},
      ],
      message:[
        {h6:"厄运小姐悬念新皮肤厄运小姐悬念新皮肤 最新消息整理",p:"官方 55.5万订阅",imgUrl:"../../static/images/message1.png"},
        {h6:"每日一笑：喵脏并获!",p:"掌盟@搬砖哥 39.8万阅",imgUrl:"../../static/images/message2.png"},
        {h6:"无状态后续：LPL队伍已确认以后转型辅助位",p:"伐木累@CG大魔王 19.4万阅",imgUrl:"../../static/images/message3.png"},
        {h6:"#每日话题#武装战姬四大形态 你最喜欢哪款？",p:"掌盟 4.5万阅",imgUrl:"../../static/images/message4.png"},
        {h6:"每日一笑：喵脏并获!",p:"官方 55.5万订阅",imgUrl:"../../static/images/message2.png"},
      ],
    }
	},
	methods:{
		// add(){this.$router.push({path:"/Page1"})}
	}
}
</script>
<style scoped lang="less">
.px2rem(@name,@px){
  @{name}: @px / 75 * 1rem;
}
.header{
  z-index: 99;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 45px;
  display: flex;
  justify-content:space-between;
  background: #265A96;
	// box-shadow: 0 3px 5px #ccc;
	&>figure:first-child{
    position: relative;
    z-index: 999;
    width:45px;
    height:45px;
    .px2rem(margin-left,30);
    display: flex;
    align-items: center;
    .public{
      width:35px;
      height:35px;
      img{
        border-radius: 50%;
        width:100%;
      }
    }
  }
  &>div:nth-child(2){
		position: absolute;
		top:0;
		left: 50%;
		width:50px;
		margin-left:-25px;
    text-align:center;
    line-height:44px;
		color: #FCBB7B;
		.px2rem(font-size,30);
  }
}
.play{
	.px2rem(padding-bottom,20);
	background:linear-gradient(white,#C6E8F5);
	&>div:first-child{
		.px2rem(font-size,30);
		display: flex;
		margin-top: 44px;
		p{
			flex:1;
			color: #434C4A;
			.px2rem(line-height,70);
			.px2rem(margin-left,30);
		}
		&>p:last-child{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			text-align: right;
			.px2rem(margin-right,30);
			img{
				.px2rem(padding-right,10);
			}
		}
	}
	&>div:last-child{
		.px2rem(margin-left,30);
		.px2rem(margin-right,30);
		img{
			width:100%;
		}
	}
}
.play_bottom{
	.px2rem(padding-bottom,20);
	.px2rem(margin-left,30);
	.px2rem(margin-right,30);
	border-bottom:1px solid #ccc;
	&>div:first-child{
		.px2rem(font-size,30);
		display: flex;
		p{
			flex:1;
			color: #434C4A;
			.px2rem(line-height,70);
		}
		&>p:last-child{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			text-align: right;
			color:#ccc;
		}
	}
	&>div:last-child{
		display: flex;
		img{
			width:48%;
		}
		&>img:first-child{
			margin-right: 4%;
		}
	}
}
.wrap{
	.px2rem(margin-left,30);
	.px2rem(margin-right,30);
	border-bottom: 1px solid #ccc;
	display: flex;
	justify-content: space-between;
	dl{
		flex:1;
		dt{
			width:60%;
			margin-left: 20%;
			.px2rem(margin-top,20);
			.px2rem(margin-bottom,20);
			img{
				width:100%;
			}
		}
		dd{
			color:#999;
			text-align: center;
			.px2rem(font-size,25);
			.px2rem(margin-bottom,20);
		}
	}
}
.message{
  padding-bottom: 55px;
  dl{
    display: flex;
    .px2rem(padding-top,25);
    .px2rem(padding-bottom,25);
    .px2rem(margin-left,30);
		.px2rem(margin-right,30);
    border-bottom:1px solid #ccc;
    dt{
      .px2rem(width,200);
      .px2rem(padding-left,20);
      img{
        width:100%;
        border:1px solid #999;
        .px2rem(border-radius,5);
      }
    }
    dd{
      position: relative;
      flex:1;
      h6{
        .px2rem(font-size,30);
        .px2rem(line-height,40);
        .px2rem(letter-spacing,2);
      }
      p{
        position: absolute;
        bottom: 0;
        left:0;
        .px2rem(font-size,20);
        .px2rem(line-height,70);
        color:gray;
      }
    }
  }
}
.message>dl:active{
	background: #f0f0f0;
  box-shadow:-20px 0 20px #f0f0f0,20px 0 20px #f0f0f0;
}
</style>		